
<form class="layui-form" action="">
    <div class="layui-form-item">
        <label class="layui-form-label">相框模板名称</label>
        <div class="layui-input-inline" style="width:400px;">
            <input type="text" name="photo_frame_title" value="" class="photo_frame_title" style="width:300px;height:35px;margin-left:20px;">
        </div>
        <div class="layui-form-mid layui-word-aux">必填,不超过4字</div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">效果图片</label>
        <div class="layui-input-inline" style="width:400px;">
            <button type="button" class="layui-btn xiaoguo" id="xiaoguo"><i class="layui-icon">&#xe67c;</i>添加效果图片</button>
            <input type="text" name="" class="wenzi1" style="width:300px;height:35px;margin-left:20px;display:none;">
            <span class="up1" style="width:300px;height:35px;margin-left:20px;display:none;color:red;"></span>
            <input type="hidden" name="xiaoguo_url" class="xiaoguo_url">
            <br><br>
            <div style="width:100px;height:100px;border:1px solid lightgreen;float: left;">
                <img src="" class="xiaoguo_http" style="width:100px;height:100px;">
            </div>
            <div class="layui-form-mid layui-word-aux" style="margin-left:10px;">必填</div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">模板图片</label>
        <div class="layui-input-inline" style="width:400px;">
            <button type="button" class="layui-btn moban" id="moban"><i class="layui-icon">&#xe67c;</i>添加模板图片</button>
            <input type="text" name="" class="wenzi2" style="width:300px;height:35px;margin-left:20px;display:none;">
            <span class="up2" style="width:300px;height:35px;margin-left:20px;display:none;color:red;"></span>
            <input type="hidden" name="moban_url" class="moban_url">
            <br><br>
            <div style="width:100px;height:100px;border:1px solid lightgreen;float: left;">
                <img src="" class="moban_http" style="width:100px;height:100px;">
            </div>
            <div class="layui-form-mid layui-word-aux" style="margin-left:10px;">必填</div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="button" class="layui-btn save">保存</button>
            <button type="button" class="layui-btn layui-btn-primary back">取消</button>
        </div>
    </div>

</form>


<script>
    //保存
    $(".save").click(function(){
        var photo_frame_title=$(".photo_frame_title").val();
        var xiaoguo_url=$(".xiaoguo_url").val();
        var moban_url=$(".moban_url").val();

        $.ajax({
            type:"post",
            data:{photo_frame_title:photo_frame_title,xiaoguo_url:xiaoguo_url,moban_url:moban_url},
            dataType: "json",
            url: "<?=base_url("no_edit/photo_frame/save_add_photo_frame")?>",
            success: function (res) {
                if(res.code==0){
                    layer.msg(res.msg, {time:1000},function(){
                        window.location.href=res.data
                    });
                }else{
                    layer.msg(res.msg, {time: 2000});
                }
            }
        })
    })

    $(function(){
        //上传
        layui.use('upload', function(){
            var upload = layui.upload;

            //上传效果图片
            upload.render({
                elem: '#xiaoguo' //绑定元素
                , url: "<?=base_url("common/upload/normal_upload")?>"
                , data: {type: "image"}
                ,acceptMime: 'image/*'
                ,before:function(){
                    $(".up1").text("上传中。。。请等待");
                    $(".up1").show()
                }
                ,done: function(res){
                    //上传完毕回调
                    if(res.code==0){
                        layer.msg(res.msg,{time:1000},function(){
                            $(".up1").text("上传成功");
                            $('.xiaoguo_http').attr("src",res.data.file_url)
                            $('.xiaoguo_url').val(res.data.file_url)
                        })
                    }else{
                        layer.msg(res.msg,{time:2000})
                    }
                }
            });

            //上传模板图片
            upload.render({
                elem: '#moban' //绑定元素
                , url: "<?=base_url("common/upload/normal_upload")?>"
                , data: {type: "image"}
                ,acceptMime: 'image/*'
                ,before:function(){
                    $(".up2").text("上传中。。。请等待");
                    $(".up2").show()
                }
                ,done: function(res){
                    //上传完毕回调
                    if(res.code==0){
                        layer.msg(res.msg,{time:1000},function(){
                            $(".up2").text("上传成功");
                            $('.moban_http').attr("src",res.data.file_url)
                            $('.moban_url').val(res.data.file_url)
                        })
                    }else{
                        layer.msg(res.msg,{time:2000})
                    }
                }
            });


        });



    })

    //返回
    $(".back").click(function(){
        window.history.back(-1);
    })
</script>